<script setup>
import aiDraw from './child/aiDraw.vue'
import chatList from './child/chatList.vue'
import { ref } from 'vue'

// tabs选中
const tabCurrent = ref(0)
// 是否显示管理按钮
const showManage = ref(true)

// 切换显示管理按钮
function manageChange() {
  showManage.value = !showManage.value
}

// tabs切换
function tabsChange(index) {
  showManage.value = true
  tabCurrent.value = index
}
</script>

<template>
  <div class='createdHistory'>
    <NavBar>创作历史</NavBar>
    <div class="container">
      <div class="top_box">
        <div class="top_tabs">
          <div class="top_tab" :class="{ active: tabCurrent === 0 }" @click="tabsChange(0)">AI绘画</div>
          <div class="top_tab" :class="{ active: tabCurrent === 1 }" @click="tabsChange(1)">AI对话</div>
        </div>
        <div class="right_text" @click="manageChange">{{ showManage ? '管理' : '取消' }}</div>
      </div>
      <div class="tip" v-if="tabCurrent === 0">仅显示15天以内的作图记录</div>

      <div class="content_box">
        <aiDraw :isDownload="!showManage" v-if="tabCurrent === 0"></aiDraw>
        <chatList :isDownload="!showManage" v-else></chatList>
      </div>


    </div>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang='scss' scoped>
::v-deep {

  .van-tab {
    flex-basis: 25% !important;
  }

  .van-tabs__scroll {
    background-color: transparent;
  }

  .van-nav-bar {
    background-color: #131130 !important;
  }



  /* 未选中的背景样式 */
  checkbox .wx-checkbox-input {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;

  }

  /* 选中后的背景样式 */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #37C674;
    width: 30rpx;
    height: 30rpx;
    border: 1px solid #37C674;
  }

  /* 选中后的勾子样式 */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    text-align: center;
    font-size: 32rpx;
    color: #FFF;
    background: transparent;
  }
}

.createdHistory {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #131130;
  overflow: hidden;

  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .top_box {
      margin-top: 30rpx;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .top_tabs {
        box-sizing: border-box;
        padding: 8rpx;
        width: 336rpx;
        height: 78rpx;
        border-radius: 39rpx;
        background: var(--a-main-box-bg-color);
        display: flex;
        align-items: center;

        .top_tab {
          flex: 1;
          height: 100%;
          border-radius: 31rpx;
          font-size: 28rpx;
          color: var(--a-one-text-color);
          letter-spacing: 2rpx;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;

          &.active {
            color: var(--a-adapter-bg-color);
            background: linear-gradient(90deg, #C3E9FF 0%, #A3B4FA 100%);
          }
        }
      }

      .right_text {
        font-size: 28rpx;
        color: var(--a-one-text-color);
      }
    }

    .tip {
      font-size: 26rpx;
      color: var(--a-one-text-color);
      text-align: center;
      margin-top: 20rpx;
    }

    .content_box {
      flex: 1;
      margin-top: 10rpx;
      overflow: hidden;
    }


  }
}
</style>